﻿<template>
  <a-card :bordered="false">
    <a-row style="margin-bottom: 20px;"><a-button @click="getDataList" type="primary">刷新</a-button></a-row>
    <a-table
      ref="table"
      :scroll="{ y: tableHeight }"
      :columns="columns"
      :rowKey="(row) => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"

      :bordered="true"

      size="small">

      <template slot="ApprovalType" slot-scope="text">
        <a-tag color="blue" v-if="text==='开票审批'" style="margin: 0;">
          {{ text }}
        </a-tag>
        <a-tag color="red" v-if="text==='退票审批'" style="margin: 0;">
          {{ text }}
        </a-tag>
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click="handleDetails(record)">查看</a>
        <a-divider type="vertical" />
        <a @click="handleHistory(record.InstanceId)">审批历史</a>
      </template>

    </a-table>
    <a-drawer
      title="审批历史"
      width="30%"
      :confirmLoading="loading"
      placement="right"
      :visible="visible"
      @close="visible = false"
      :body-style="{ paddingBottom: '80px' }">
      <a-steps progress-dot :current="steps.length - 1" direction="vertical">
        <a-step v-for="(item, index) in steps" :key="index" :title="item.Title">
          <div style="width:300px" slot="description">
            <div style="width: 100%;">
              <span>{{ item.UserName }}</span>
              <a-tag :color="item.color">
                {{ item.type }} {{ item.State == 'Finished' ? item.FinishTime : '' }}
              </a-tag>
            </div>
            <span v-show="item.State != 'ToDo' && item.Comment">{{ item.Comment }}</span>
            <p>{{ item.StartTime }}</p>
          </div>
        </a-step>
      </a-steps>
    </a-drawer>
    <OutboundDetails ref="OutboundDetails" @success="getDataList"></OutboundDetails>
  </a-card>
</template>

<script>
import moment from 'moment'

import OutboundDetails from './OutboundDetails.vue'

export default {
  components: {
    OutboundDetails
  },
  created () {
    this.getDataList()
  },
  mounted () {
    this.$nextTick(() => {
      // 页面渲染完成后的回调
      this.tableHeight = this.getTableHeight(true) + 24
    })
  },
  data () {
    return {
      tableHeight: 570, // 表格高度
      data: [],
      visible: false,
      pagination: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['20', '30', '40', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      loading: false,
      columns: [
        { title: 'No', dataIndex: 'No', width: '200px' },
        { title: '申请日期', dataIndex: 'Time', width: '150px', align: 'center', customRender: (value) => moment(value).format('YYYY-MM-DD hh:mm') },
        { title: '待办类型', dataIndex: 'ApprovalType', width: '100px', align: 'center', scopedSlots: { customRender: 'ApprovalType' } },
        { title: '标题', dataIndex: 'Title' },
        { title: '操作', dataIndex: 'action', width: '150px', scopedSlots: { customRender: 'action' } }
      ],
      steps: []
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.getDataList()
    },
    getDataList () {
      this.loading = true
      this.$http
        .post('/InvoiceManagement/Inv_InvoiceApplyMain/GetOperatorInfoPending', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: 'Time',
          SortType: 'desc'
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
        })
    },
    handleDetails (record) {
      this.$refs.OutboundDetails.openForm(record)// 打开详情页
    },
    // 审批历史
    handleHistory (id) {
      this.visible = true
      const obj = {
        'Finished': {
          name: '已完成',
          color: '#87d068'
        },
        'ToDo': {
          name: '待办',
          color: 'purple'
        },
        'Waiting': {
          name: '等待',
          color: 'red'
        },
        'UnRead': {
          name: '未读',
          color: 'red'
        },
        'Canceled': {
          name: '驳回',
          color: 'red'
        },
        'Draft': {
          name: '草稿',
          color: 'red'
        },
        'Timeout': {
          name: '超时',
          color: 'red'
        },
        'Skiped': {
          name: '已跳过',
          color: 'red'
        }
      }
      this.$http.post('/InvoiceManagement/Inv_InvoiceApplyMain/Open?InstanceId' + '=' + id).then(res => {
        res.Data.forEach(item => {
          item.StartTime = item.StartTime.slice(0, -4)
          item.FinishTime = item.FinishTime.slice(0, -4)
          item.type = obj[item.State].name
          item.color = obj[item.State].color
        })
        this.steps = res.Data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ant-steps-dot .ant-steps-item-content {
  width: 250px;
}

/deep/ .active {
  background-color: #fdf3f2 !important;
  color: #e55957;
}

/deep/ .ant-steps-item-content {
  width: 300px;
}
</style>
